<template>
	<div class="container">
		<div class="abs">
			<el-page-header @back="$router.go(-1)" content="">
			</el-page-header>
		</div>
		<transition name="el-zoom-in-center">
		    <div v-show="show2" class="title"><img src="../assets/images/新鲜程度.jpg" alt=""></div>
		</transition>
		<div class="main">

			<div id="main">
			</div>

		</div>
	</div>
</template>

<script>
// 按需导入 API 接口
import { getGoodsXinXianAPI } from '@/api/xinxianAPI'
export default {
  name: 'Echarts',
  data () {
    return {
      a1: null,
      a2: null,
      a3: null,
      a4: null,
	  show2: false
    }
  },

  methods: {
    async initGoodsXinXian () {
	    // 1. 调用 API 接口
	    const { data: res } = await getGoodsXinXianAPI()
      // console.log(res)
	    // 2. 判断请求是否成功
	    if (res.message === 'OK') {
	      // 3. 为用户的频道列表赋值
		  console.log(res.data)
		  const x = res.data.info_list
		  var b = {}
		  for (var i = 0; i < x.length; i++) {
		      if (!(x[i].name in b)) {
		          b[x[i].name] = { 0: 0, 1: 0, 2: 0 }
		      }
		      b[x[i].name][x[i].Warning] += x[i].weight
		  };
		  var a1 = []
		  var a2 = []
		  var a3 = []
		  var a4 = []
		  Object.keys(b).forEach(function (key) {
			   a1.push(key)
			   a2.push(b[key][0])
			   a3.push(b[key][1])
			   a4.push(b[key][2])
		  })
        this.myEcharts(a1, a2, a3, a4)
	    }
	  },
    myEcharts (a1, a2, a3, a4) {
	  var echarts = require('echarts')
      var chartDom = document.getElementById('main')
      var myChart = echarts.init(chartDom, 'dark')
      var option
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: a1
        },
        dataZoom: [
          {
            type: 'slider',
            show: true,
            yAxisIndex: [0],
            left: '93%',
            start: 1,
            end: 100,
            moveHandleSize: '100',
            moveHandleIcon: // 用于画手柄
			              // "M0,0 v9.7h5 v-9.7h-5 Z", // 画一个长方形
			           'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z' // 画一个圆形
          },
          {
            type: 'inside',
            yAxisIndex: [0],
            start: 1,
            end: 5
          }
        ],
        series: [
          {
            name: '新鲜',
            type: 'bar',
            stack: 'total',
            // label: {
            //   show: true
            // },
            emphasis: {
              focus: 'series'
            },
            color: 'rgb(124,255,178)',
            data: a2
          },
          {
            name: '即将过期',
            type: 'bar',
            stack: 'total',
            // label: {
            //   show: true
            // },
            emphasis: {
              focus: 'series'
            },
            color: 'rgb(73,146,249)',
            data: a3
          },
          {
            name: '已过期',
            type: 'bar',
            stack: 'total',
            // label: {
            //   show: true
            // },
            emphasis: {
              focus: 'series'
            },
            color: 'rgb(245,67,101)',
            data: a4
          }
        ],
        aria: {
          enabled: true,
          decal: {
            show: true
          }
        }
      }

      option && myChart.setOption(option)
    }
  },
  created () {
    this.initGoodsXinXian()
  },
  mounted () {
	  this.show2 = true
  }
}
</script>

<style scoped>
	body {
		margin: 0;
	}

	.container {
		width: 10rem;
		height: 5.625rem;
		margin: 0 auto;
		background: #100c2a;
		border: 1px solid #797979;
		overflow: hidden;
	}

	.main {
		width: 100%;
		height: 100%;
	}

	.title {
		width: 3.04375rem;
		height: 0.7rem;
		margin: 0.2625rem auto
	}

	.title img {
		width: 100%;
		height: 100%;
	}

	.main #main {
		width: 100%;
		height: 4.15625rem;
		margin-top: 0.375rem;
	}
</style>
